<template>
	<view class="lawyer-evaluation">
		<common-navbar title="律师评价"></common-navbar>
		<view class="lawyer-info-container" v-if="lawyerInfo">
			<view class="lawyer-photo-wrapper">
				<u-image width="100%" height="100%" border-radius="12" :src="lawyerInfo.avatars" mode="widthFix" />
			</view>
			<view class="lawyer-info-wrapper">
				<view class="lawyer-name">
					{{lawyerInfo.lawyer_name}}律师
				</view>
				<view class="consult-type">
					<text class="label">咨询方式：</text>{{lawyerInfo.consult_title}}
				</view>
				<view class="lawyer-specialty">
					擅长：{{lawyerInfo.skill}}
				</view>
			</view>
		</view>
		<view class="select-solve-status">
			<view class="title">
				您的问题得到解决了吗？
			</view>
			<view class="switch-tabs">
				<view class="tabs-item" :class="{'active':isResolve}" @click="isResolve = true">
					已解决
				</view>
				<view class="tabs-item" :class="{'active':!isResolve}" @click="isResolve = false">
					未解决
				</view>
			</view>
		</view>
		<view class="service-score-container">
			<view class="title">
				服务评价：
			</view>
			<view class="score">
				<u-rate v-model="score" :count="5" gutter="19" size="44" :min-count="1" active-color="#fcd165" />
			</view>
			<view class="label">
				{{rateLabel[score-1]}}
			</view>
		</view>
		<view class="evaluation-bottom-container">
			<view class="title">
				选择标签:
			</view>
			<view class="tag-list">
				<view class="tag-item" v-for="item,index in tagList" :key="index" :class="{'selected':item.is_selected}"
					@click="onTagClick(item)">
					{{item.tag_name}}
				</view>
			</view>
			<view class="evaluation-input">
				<textarea class="input" :placeholder-style="placeholderStyle" v-model="evaluation"
					placeholder="您的评价将是我们进步的动力，成功路上感谢有您。" @input="onInput" />
			</view>
			<button class="submit-btn" @click="submit">
				提交评价
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluation: '',
				score: 5,
				isResolve: true,
				rateLabel: ['非常差', '较差', '普通', '满意', '非常满意'],
				placeholderStyle: 'fontSize:24rpx;color:#999999;fontFamily:$global-font-family',
				tagList: [{
						tag_name: '专业性强',
						is_selected: false
					}, {
						tag_name: '态度谦和',
						is_selected: false
					}, {
						tag_name: '温柔耐心',
						is_selected: false
					}, {
						tag_name: '效率很高',
						is_selected: false
					},
					// {
					// 	tag_name: '专业性强',
					// 	is_selected: false
					// }, {
					// 	tag_name: '态度谦和',
					// 	is_selected: false
					// }, {
					// 	tag_name: '温柔耐心',
					// 	is_selected: false
					// }, {
					// 	tag_name: '效率很高',
					// 	is_selected: false
					// },
				],
				taskCode: '',
				evaluateId: '',
				lawyerInfo: null,
			}
		},
		async onLoad(options) {
			console.log(options)
			await this.$loginStatus;
			this.taskCode = options.taskCode;
			this.evaluateId = options.evaluateId;
			const {
				data
			} = await this.$u.post(this.$restUrl.getLawyerInfoByTaskCode, {
				task_code: this.taskCode
			})
			console.log('律师详情>>>>>>>>>>>>>>>>>', data);
			this.lawyerInfo = data;
		},
		computed: {
			currentTargetText() {
				return (this.tagList.filter(item => item.is_selected)).map(item => item.tag_name).join(',')
			}
		},
		methods: {
			onTagClick(tag) {
				this.$set(tag, 'is_selected', !tag.is_selected);
				if (tag.is_selected) {
					this.evaluation += tag.tag_name;
				} else {
					this.evaluation = this.evaluation.replace(tag.tag_name, '');
				}
			},
			onInput(e) {
				this.tagList.forEach(item => {
					this.$set(item, 'is_selected', this.evaluation.indexOf(item.tag_name) != -1);
				})
			},
			async submit() {
				const options = {
					is_over: this.isResolve ? 2 : 1,
					remark: this.evaluation,
					score: this.score,
					task_code: this.taskCode,
					evaluate_id: this.evaluateId,
				}
				await this.$u.post(this.$restUrl.putLawyerEvaluation, options);
				uni.navigateBack({
					success: () => {
						this.$showToast('提交评价成功'),
							this.$nextTick(() => {
								uni.$emit('refreshEvaluationList')
							})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./lawyerEvaluation.scss";
</style>
